<template>
<div>
  <div class="AlbumDetailBox">
    <div class="AlbumDetailList">
      <img :src="albumDetail.albumPicUrl" class="img">
      <div style="margin-left: 20px">
        <h1 style="font-size: 30px;line-height: 30px;">{{albumDetail.albumName}}</h1>
        <p style="font-size: 18px;line-height: 20px;"> 歌手:{{albumDetail.albumSinger}}</p>
        <p style="font-size: 18px;line-height: 20px;"> 时间:{{getPublishTime(albumDetail.publishTime)}}</p>
      </div>
    </div>
  </div>
  <el-menu
      style="margin-left: 80px;"
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      active-text-color="green"
      @select="handleSelect"
      router
  >
    <el-menu-item index="/homePage/AlbumDetail/1">歌曲</el-menu-item>
    <el-menu-item index="/homePage/AlbumDetail/2" >评论</el-menu-item>
  </el-menu>
  <div ><router-view :whichList="List" listType=3></router-view></div>
</div>

</template>

<script setup>
import {computed, ref} from "vue";
import {useSongsStore,usealbumDetailStore} from "@/Store/Pinia/pinia"
const activeIndex=ref(0)
const songsStore =useSongsStore();
const albumDetail=usealbumDetailStore();
const List=ref(albumDetail.songsList);
const getPublishTime=computed(()=>{
  return (time)=>{
    let date=new Date(time);
    let year = date.getFullYear(),
        month = date.getMonth() + 1,
        strDate = date.getDate()
    if (month < 10) month = `0${month}`
    if (strDate < 10) strDate = `0${strDate}`

    return `${year}-${month}-${strDate}`
  }
})
</script>

<style scoped>
.AlbumDetailBox{
  width:100%;
  height: 200px;
  margin-top: 80px;
}

.AlbumDetailBox .AlbumDetailList{
  width: 600px;
  height: 100%;
  margin-left: 100px;
  display: flex;
}

.AlbumDetailBox .AlbumDetailList .img {
  width: 180px;
  height: 180px;
}
</style>